<template>
    <div class="login">
        <el-card>
            <!-- 卡片头部 -->
            <div slot="header">
                <el-row type="flex" justify="space-between" align="middle">
                    <span>用户登录</span>
                    <el-button>去注册</el-button>
                </el-row>
            </div>

            <!-- 卡片内容区 -->
            <el-input v-model="username" placeholder="请输入用户名" />

            <el-input v-model="password" placeholder="请输入密码" />

            <el-row type="flex" justify="end">
                <el-button @click="login" class="login-btn">登录</el-button>
            </el-row>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            username: "",
            password: "",
        };
    },
    methods: {
        async login() {
            const { username, password } = this;
            const res = await this.$http.post("/login", { username, password });
            if (res.code === 200) {
                this.$message.success("登录成功");
                // 保存用户登录状态
                window.sessionStorage.setItem("uid", res.data.uid);
                // 跳转到用户页面
                this.$router.push("/users");
            } else {
                this.$message.error(res.message);
            }
        },
    },
};
</script>

<style lang="less">
.login {
    height: 100%;
    box-sizing: border-box;

    .el-card {
        width: 450px;
        margin: 150px auto;
    }

    .el-input {
        margin-bottom: 15px;
    }

    .login-btn {
        width: 100%;
    }
}
</style>
